<template>
  <div class="position-full " :class="widget.UI.data.layout==='vertical'?'vertical':'horizontal'">
    <div :style="{...styles.track}" class="processor-track position-full">
      <div :style="{...styles.value}" class="processor-value"></div>
    </div>
  </div>
</template>

<script>
  import {mapState} from 'vuex';
  import {formatColor, deepCopy} from '@/utils';
  import {WidgetLevel} from "@/modules/IDE/widget/atom/widgetLevel";

  export default {
    name: 'LevelWidget',
    props: {
      widget: {
        type: WidgetLevel,
        default: () => {
          return {};
        }
      }
    },
    data() {
      return {};
    },
    computed: {
      ...mapState({
        activeTheme: state => state.ide.activeTheme,
      }),
      state() {
        if (!this.widget || !this.widget.UI.state) return;
        return this.widget.getCurrentState();
      },
      styles() {
        const {rect = {}} = this.widget;
        const {backStyle = {}, values = {}} = this.state;
        const {trackColor = '', valueColor = '', layout = '', minLimit, maxLimit} = this.widget.UI.data;
        const trackStyles = {};
        const valueStyles = {};
        const {height = 0, width = 0} = rect;
        if (layout === 'horizontal') {
          trackStyles.height = `${height}px`;
          valueStyles.height = `${height}px`;
          trackStyles.width = `${width}px`;
          let rate = (width / (maxLimit - minLimit)).toFixed(2)
          let widths = ((this.state.values.value - minLimit) * rate).toFixed(2)
          this.state.values.value && (valueStyles.width = `${Math.abs(widths)}px`);
        } else {
          trackStyles.height = `${height}px`;
          valueStyles.width = `${width}px`;
          trackStyles.width = `${width}px`;
          let rate = (height / (maxLimit - minLimit)).toFixed(2)
          let heights = ((this.state.values.value - minLimit) * rate).toFixed(2)
          this.state.values.value && (valueStyles.height = `${Math.abs(heights)}px`);
        }
        trackColor && (trackStyles.backgroundColor = formatColor(trackColor, this.activeTheme));
        valueColor && (valueStyles.backgroundColor = formatColor(valueColor, this.activeTheme));

        // 圆角
        const {borderRadius = {}} = backStyle;
        const {topLeft = 0, topRight = 0, bottomLeft = 0, bottomRight = 0} = borderRadius;
        topLeft && (trackStyles.borderTopLeftRadius = valueStyles.borderTopLeftRadius = `${topLeft}px`);
        topRight && (trackStyles.borderTopRightRadius = valueStyles.borderTopRightRadius = `${topRight}px`);
        bottomLeft && (trackStyles.borderBottomLeftRadius = valueStyles.borderBottomLeftRadius = `${bottomLeft}px`);
        bottomRight && (trackStyles.borderBottomRightRadius = valueStyles.borderBottomRightRadius = `${bottomRight}px`);

        // 默认值
        // values.value && (valueStyles.height = `${(values.value / (maxLimit - minLimit)).toFixed(2) * height}px`);

        return {
          track: trackStyles,
          value: valueStyles
        };
      }
    },
  };
</script>

<style scoped lang="less">
  .processor-track {
    .processor-value {
      position: absolute;
      top: 0;
      left: 0;
    }
  }

  .vertical {
    transform: rotate(180deg);
  }

  .horizontal {
    transform: rotate(0);
  }
</style>
